<template>
  <div class="section-container-3">
    <div class="header">
      <bannerHeader
        @open="open"
        :title1="title1"
        title2="Business progress"
        :isCheck="false"
      />
    </div>
    <div class="show-body">
      <div class="progress-section" :style="{ height: height }">
        <div class="progress-list-form">
          <div class="title"></div>
          <div class="right">
            <div class="right-list" v-for="item in titleList">{{ item }}</div>
          </div>
        </div>
        <div class="progress-list-form" v-for="item in listData">
          <div class="title">{{ item.deptName }}</div>
          <div class="banner">
            <div
              class="banner-list banner-list-1"
              :data-border="item.infos.type1 === 2"
              :data-next="item.infos.type2 !== 3"
              :data-background="item.infos.type1 === 3"
            ></div>
            <div
              class="banner-list"
              :data-border="item.infos.type2 === 2"
              :data-next="item.infos.type3 !== 3"
              :data-background="item.infos.type2 === 3"
            ></div>
            <div
              class="banner-list"
              :data-border="item.infos.type3 === 2"
              :data-next="item.infos.type4 !== 3"
              :data-background="item.infos.type3 === 3"
            ></div>
            <div
              class="banner-list"
              :data-border="item.infos.type4 === 2"
              :data-next="item.infos.type5 !== 3"
              :data-background="item.infos.type4 === 3"
            ></div>
            <div
              class="banner-list"
              :data-border="item.infos.type5 === 2"
              :data-background="item.infos.type5 === 3"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bannerHeader from "../banner-header-left";
import request from "@/utils/request";
import Qs from "qs";
import { mapState } from "vuex";
import UIfn from "./popup";
export default {
  components: {
    bannerHeader,
  },
  data() {
    return {
      title1: "8月业务进度",
      height: null,
      titleList: ["申请", "外证", "交税", "开票", "抵扣"],
      listData: [],
      year: null,
      month: null,
    };
  },
  computed: {
    ...mapState("reportFormDark", ["deptId", "projectId"]),
  },
  watch: {
    deptId: {
      handler(val) {
        this.$nextTick(() => {
          this.screenSpeedList();
        });
      },
      immediate: true,
    },
    projectId: {
      handler(val) {
        this.$nextTick(() => {
          this.screenSpeedList(); //开票与收款
        });
      },
    },
  },
  created() {
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    this.title1 = `${month}月业务进度`;
    this.year = year;
    this.month = month;
  },
  methods: {
    open() {
      UIfn(this);
    },
    screenSpeedList(deptId = this.deptId) {
      request({
        url: "/system/screen/speedList",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId,
          year: this.year,
          //   month: 1,
          month: this.month,
          projectId: this.projectId,
        }),
      }).then((res) => {
        const data = [];
        if (res && res.data && res.data.length > 0) {
          // 1灰色圆圈 2激活色圆圈 3有背景色条纹
          // ["申请 type1", "外证 type2", "交税 type3", "开票 type4", "抵扣 type5"]
          res.data.forEach((item) => {
            const deptName = item.deptName;
            const infos = {
              type1: 1,
              type2: 1,
              type3: 1,
              type4: 1,
              type5: 1,
            };
            if (item.infos && item.infos.length > 0) {
              item.infos.forEach((el) => {
                if (el.speedName === "申请") {
                  if (el.speedAgreeDate) {
                    infos.type1 = 2;
                  }
                  if (el.speedAgreeDate && el.speedSubmitDate) {
                    infos.type1 = 3;
                  }
                } else if (el.speedName === "外证") {
                  if (el.speedAgreeDate) {
                    infos.type2 = 2;
                  }
                  if (el.speedAgreeDate && el.speedSubmitDate) {
                    infos.type2 = 3;
                  }
                } else if (el.speedName === "交税") {
                  if (el.speedAgreeDate) {
                    infos.type3 = 2;
                  }
                  if (el.speedAgreeDate && el.speedSubmitDate) {
                    infos.type3 = 3;
                  }
                } else if (el.speedName === "开票") {
                  if (el.speedAgreeDate) {
                    infos.type4 = 2;
                  }
                  if (el.speedAgreeDate && el.speedSubmitDate) {
                    infos.type4 = 3;
                  }
                } else if (el.speedName === "抵扣") {
                  if (el.speedAgreeDate) {
                    infos.type5 = 2;
                  }
                  if (el.speedAgreeDate && el.speedSubmitDate) {
                    infos.type5 = 3;
                  }
                }
              });
            }
            data.push({
              deptName,
              infos,
            });
          });
        }
        console.log(data);
        // this.$refs.progress.open(data)
        this.listData = data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/report_form_dark/styles/fn.scss";

.section-container-3 {
  width: 100%;
  height: 100%;

  .header {
    width: 100%;
    height: vh(42);
  }

  .show-body {
    width: 100%;
    height: calc(100% - #{vh(42)});

    .progress-section {
      height: 100%;
      width: 100%;
      overflow: auto;
      padding: vw(6) 0;
      //   border: 1px solid red;

      .title {
        width: 20%;
        font-size: vw(14);
        font-family: Microsoft YaHei UI;
        font-weight: 400;
        color: rgba(143, 199, 255, 0.64);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &:hover {
          color: rgba(143, 199, 255, 1);
        }
      }

      .progress-list-form {
        width: 100%;
        height: 34px;
        line-height: 34px;
        display: flex;
        flex-direction: row;
        align-items: center;

        .right {
          flex-grow: 1;
          flex-shrink: 1;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          padding-left: vw(14);

          &-list {
            font-size: vw(14);
            font-family: Microsoft YaHei UI;
            font-weight: 400;
            color: rgba(143, 199, 255, 0.48);
          }
        }

        .banner {
          flex-grow: 1;
          display: flex;
          flex-direction: row;
          border-radius: vw(8);
          overflow: hidden;

          &-list {
            flex-grow: 1;
            width: 20%;
            height: vw(10);
            background: rgba(143, 199, 255, 0.2);
            // border-radius: 0 vw(8) vw(8) 0;
            position: relative;

            &::after {
              content: "";
              display: block;
              position: absolute;
              right: 0;
              top: vw(-0);
              width: vw(10);
              height: vw(10);

              background: rgba(255, 255, 255, 0.4);

              border: vw(2) solid #1890ff;
              border-radius: vw(10);
            }
          }

          .banner-list-1 {
            width: vw(26);
            height: vw(10);
            background: rgba(255, 255, 255, 0.4);
            // border-radius: vw(8);

            &::after {
              content: "";
              display: block;
              position: absolute;
              right: 0;
              top: vw(-0);
              width: vw(10);
              height: vw(10);
              background: rgba(255, 255, 255, 0.4);
              border: vw(2) solid #1890ff;
              border-radius: vw(10);
            }
          }

          [data-border="true"] {
            &.banner-list,
            &.banner-list-1 {
              &::after {
                content: "";
                border-color: #1fc557;
              }
            }
          }

          [data-background="true"] {
            &.banner-list,
            &.banner-list-1 {
              background: #1890ff;
              &::after {
                content: "";

                border-color: #1890ff;
              }
            }
          }

          [data-next="true"] {
            &.banner-list,
            &.banner-list-1 {
              border-radius: 0 vw(8) vw(8) 0;
            }
          }
        }
      }
    }
  }
}
</style>